<template>
    <div>
        <h1>1.axios基本使用</h1>
        <button @click="hdClick">发送请求</button>
        <hr>
        <ul>
            <li v-for="(item,index) in arr" :key="index">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: '',
        components: {

        },
        props: {

        },
        data() {
            return {
                arr:[]
            };
        },
        methods: {
            hdClick() {
                // axios.get('/getdata') 向前端服务器发送请求
                // axios.get('http://localhost:3000/getdata') // 直接向服务器发请求

                // axios.get('/getdata?page=1', {  //直接写路径上
                axios.get('/getdata', {   
                    params: {
                        page: 1
                    }
                }).then(res => {
                    // res是一个对象，是axios封装好的一个对象
                    // 真正后端返回的信息只是 res.data
                    console.log(res)
                })

                // axios.post('/postdata',{ name:1,age:2 })
                // axios.post('/postdata',{
                //     data:{
                //         num:123
                //     }
                // })

                // 小结：
                // 1.get请求带参数的时候，需要写params这是格式要求！
                // 2.post请求携带参数，可以直接写，不需要额外加属性
            },
            getNews(){
                axios.get('/getnews').then(res=>{
                    console.log(res.data)
                    this.arr = res.data
                })
            }
        },
        created() {
            this.getNews()
        },
    };
</script>

<style scoped lang="less">

</style>